<template>
	<div id="admin-login">
		<el-form :model="loginForm" label-width="120px">
			<el-form-item label="账号"><el-input type="text" placeholder="请输入账号" v-model="loginForm.nickName"></el-input></el-form-item>
			<el-form-item label="密码"><el-input type="password" placeholder="请输入密码" v-model="loginForm.password"></el-input></el-form-item>
			<el-form-item label="登录身份">
				<el-select v-model="loginForm.role" placeholder="请选择登录的身份">
					<el-option label="开发部" value="Development" />
					<el-option label="人事部" value="HumanResource" />
					<el-option label="市场部" value="Marketing" />
					<el-option label="经理" value="Manager" />
					<el-option label="管理员" value="Admin" />
					<el-option label="访客" value="Guest" />
				</el-select>
			</el-form-item>
			<el-form-item><el-button type="primary" @click="onLogin">登录</el-button></el-form-item>
		</el-form>
	</div>
	<fullScreen v-model="loading">
		<div style="display: flex;justify-content: center;align-items: center;">
			<loadingIcon></loadingIcon>
			登录中
			<span v-slow-load>...</span>
		</div>
	</fullScreen>
</template>

<script>
import fullScreen from '@/component/common/FullScreen.vue';
import loadingIcon from '@/component/common/loadingIcon.vue';
export default {
	data() {
		return {
			loginForm: {
				role: 'Admin'
			},
			loading: false
		};
	},
	methods: {
		onLogin() {
			this.loading = true;
			setTimeout(() => {
				this.loading = false;
				this.$store.commit('admin/login', this.loginForm);
				window.localStorage.setItem('admin',JSON.stringify(this.loginForm))
				this.$router.push('/');
			}, 1000);
		}
	},
	components: {
		fullScreen,
		loadingIcon
	}
};
</script>

<style lang="scss">
#admin-login {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	padding-top: 220px;
}
</style>
